const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const ImageminPlugin = require('imagemin-webpack-plugin').default


module.exports = {
  entry: { home: path.resolve('src/pages/home/index.js') },
  output: {
    path: path.resolve('dist'),
    filename: '[name].[chunkhash].js',
  },
  resolve: {
    alias: {
      '@static': path.resolve('static'),
    },
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // 解析less 并抽离css
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
  plugins: [
    // 清空dist(打包文件夹)下所有文件
    new CleanWebpackPlugin(),
    // 创建HTML页面,webpack output主要负责提取压缩的js文件,需要用这个插件生成HTML文件
    new HtmlWebpackPlugin({
      filename: `index.html`, //生成的文件名
      template: `./src/pages/home/index.html`, //文件模板不穿会生成一个默认Body内容为空的HTML文件
      inject: true,
      title: 'webpack5',
      // favicon: path.resolve(__dirname, 'static/favicon.ico'),
      chunks: ['home'], // chunks为该页面要包含的js文件
    }),
    // new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
    }),
    //根据实际情况使用
    new CopyPlugin({
      patterns: [
        {
          from: 'static',
          to: 'static',
        },
      ],
    }),
    // 放在CopyPlugin之后可以压缩copy的图片资源
    // new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new OptimizeCSSAssetsPlugin({}),
      new TerserJSPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
          compress: {
            drop_console: true, // 默认false，设置为true, 则会删除所有console.* 相关的代码。
          },
        },
        extractComments: false,
      }),
    ],
  },
  devServer: {
    // watchFiles: ['src', 'static'],
    hot: true,
    compress: true,
    port: 9000,
    open: true,
  },
}
